<template>
  <el-card>
    <ft-pagination :current-page="1" :page-size="8" :total="totalRowNum" @pageChange="load">
      <div slot="toolbar" style="text-align: left">
        <el-button size="small" type="primary" icon="el-icon-refresh" @click="load(pageIndex,pageSize)">刷新</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="add">新建</el-button>
        <el-input style="width: 240px;margin-left: 72px;" type="text" v-model="filter" placeholder="请输入..."
                  @change="load(pageIndex, pageSize)"></el-input>
      </div>
      <el-table :data="data">
        <el-table-column label="编号" align="left">
          <template slot-scope="scope">
            <span v-if="!scope.row.editing">{{scope.row.tenantCode}}</span>
            <el-input v-if="scope.row.editing" type="text" v-model="scope.row.tenantCode"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="tenantName" label="名称" align="left">
          <template slot-scope="scope">
            <span v-if="!scope.row.editing">{{scope.row.tenantName}}</span>
            <el-input v-if="scope.row.editing" type="text" v-model="scope.row.tenantName"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="left">
          <template slot-scope="scope">
            <span v-if="scope.row.status=='INIT'">初始</span>
            <span v-if="scope.row.status=='START'">启用</span>
            <span v-if="scope.row.status=='STOP'">禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="left">
          <template slot-scope="scope">
            <span v-if="!scope.row.editing">{{scope.row.remark}}</span>
            <el-input v-if="scope.row.editing" type="textarea" autosize v-model="scope.row.remark"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button slot="reference" type="text" v-if="scope.row.editing" size="small"
                       @click="save(scope.$index,scope.row)">保存
            </el-button>
            <el-button slot="reference" type="text" v-if="scope.row.editing" size="small"
                       @click="cancel(scope.$index,scope.row)">取消
            </el-button>
            <el-button slot="reference" type="text" v-if="!scope.row.editing" size="small"
                       @click="edit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button slot="reference" type="text" v-if="!scope.row.editing&&(scope.row.status=='INIT'||scope.row.status=='STOP')" size="small"
                       @click="enabled(scope.$index, scope.row)">启用
            </el-button>
            <el-button slot="reference" type="text" v-if="!scope.row.editing&&(scope.row.status=='START')" size="small"
                       @click="disabled(scope.$index, scope.row)">禁用
            </el-button>

            <el-popover v-if="!scope.row.editing&&scope.row.status=='INIT'"
                        placement="top"
                        width="160"
                        v-model="scope.row.delVisible">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="small" type="text" @click="scope.row.delVisible = false">取消</el-button>
                <el-button type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
              </div>
              <el-button slot="reference" type="text" size="small" style="color: #b96463">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </ft-pagination>
  </el-card>
</template>

<script>
  export default {
    name: "Tenant",
    props: ['tenantId'],
    mounted() {
    },
    data() {
      return {
        filter: '',
        data: [],
        pageIndex: 0,
        pageSize: 8,
        totalRowNum: 0
      }
    },
    methods: {
      load(pageIndex, pageSize) {
        this.pageIndex = pageIndex
        this.pageSize = pageSize
        this.data = []
        this.$http.get('/joys-rest/joys-master-data/tenant/query', {
          params: {
            pageIndex: pageIndex,
            pageSize: pageSize,
            filter: this.filter
          }
        }).then(resp => {
          this.data = resp.body.rows
          this.data.forEach((item, index) => {
            item.editing = false
          })
          this.totalRowNum = resp.body.total
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      add() {
        this.data.push({editing: true, status: 'INIT'})
      },
      save(index, value) {
        this.$http.post('/joys-rest/joys-master-data/tenant/save', value).then(resp => {
          resp.body.editing = false
          this.$set(this.data, index, resp.body)
          this.$message.success('操作成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      edit(index, value) {
        value.editing = true
        this.$set(this.data, index, value)
      },
      cancel(index, value) {
        if(value.tenantId){
          this.$http.get('/joys-rest/joys-master-data/tenant/' + value.tenantId).then(resp => {
            resp.body.editing = false
            this.$set(this.data, index, resp.body)
          }, resp => {
            this.$message.error(resp.body.message)
          })
        }else{
          this.data.splice(index, 1)
        }
      },
      handleDelete(index, value) {
        this.$http.delete('/joys-rest/joys-master-data/tenant/' + value.tenantId + "/" + value.dataVersion).then(resp => {
          this.data.splice(index, 1)
          this.$message.success('删除成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      enabled(index, value){
        value.status='START'
        this.$http.post('/joys-rest/joys-master-data/tenant/save', value).then(resp => {
          resp.body.editing = false
          this.$set(this.data, index, resp.body)
          this.$message.success('启用成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      disabled(index, value){
        value.status='STOP'
        this.$http.post('/joys-rest/joys-master-data/tenant/save', value).then(resp => {
          resp.body.editing = false
          this.$set(this.data, index, resp.body)
          this.$message.success('禁用成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      }
    }

  }
</script>

<style scoped>

</style>
